<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素随着鼠标移动</title>
<style type="text/css">
	body{
		width: 100%;
		height: 100%;
	}

	#d1{
		width: 100px;
		height: 100px;
		background-color:#000000;
		position:relative;
	}




</style>
</head>
<body>
	<div id="d1"></div>

<script type="text/javascript">

	var d1=document.getElementById('d1')
	var isMove=false

	var changePosition=function(x,y){

		if(isMove){
			d1.style.left=x-50+'px'
			d1.style.top=y-50+'px'
		}
	}




	d1.addEventListener('mousedown',function(){
		console.log('鼠进入了d1')
		isMove=true
	})

	d1.addEventListener('mouseup',function(){
		console.log('鼠标离开了d1')
		isMove=false
	})




	document.body.addEventListener('mousemove',function(result){
		console.log(result.clientX,result.clientY)
		changePosition(result.clienX,result.clientY)
	})










</script>
</body>
</html>